<template>
    <div>
        <scroller
            :on-refresh="refresh"
            :on-infinite="infinite"
            ref="infinite"
        >
            <yd-slider
                autoplay="3000"
                style="height: 180px;"
            >
                <yd-slider-item
                    v-for="(item, index) in swiperSource"
                    :key="index"
                >
                    <a :href="item.link_url">

                        <img
                            class="swiperImg"
                            :src="item.images"
                        >
                    </a>
                </yd-slider-item>
            </yd-slider>
            <div class="tab">
                <div
                    :class="tabSelect?'':'tab_this'"
                    @click="clickTab(false)"
                >
                    传单浏览任务
                </div>
                <div
                    :class="tabSelect?'tab_this':''"
                    @click="clickTab(true)"
                >
                    公众号关注任务
                </div>
            </div>
            <div class="cont">
                <div
                    @click="clickGo(item)"
                    v-for="(item, index) in listSource"
                    :key="index"
                    :class="contClass(index)"
                >
                    <img :src="tabSelect?item.images:item.images">

                    <div>
                        <div>
                            <div>{{tabSelect?item.title:item.title}}</div>
                            <div></div>
                        </div>
                        <div>
                            {{tabSelect?item.desc:item.desc}}
                        </div>
                        <div>
                            <div>
                                <img :src="tabSelect?require('../../asset/icon/icon_home_key.png'):require('../../asset/icon/icon_home_money.png')">
                                <div>

                                    {{tabSelect?'获取口令':'领取奖励'}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </scroller>
        <router-link
            to="/enter"
            class="enter"
        >
            <img src="../../asset/icon/icon_home_money.png">
            <div>
                输入口令
            </div>
            <div>
                领取奖励
            </div>
        </router-link>
        <Footer :idx="1" />
        <div
            class="fixed"
            v-show="selectShow"
        >
            <img :src="selectShowUrl">
            <div @click="close()">
                <img src="../../asset/icon/icon_close.png">
            </div>
        </div>
    </div>
</template>
<script>
import goodsShare from '../../config/goodsShare.js';
import Footer from '../../component/Footer'
export default {
    name: "find",
    data() {
        return {
            tabSelect: false,
            page: 1,
            limit: 10,
            swiperSource: [],
            listSource: [],
            selectShow: false,
            selectShowUrl: '',
            time: -1,
        };
    },
    methods: {
        clickGo(e) {
            if (this.tabSelect) {
                this.$router.push({ path: 'wxCont', query: { id: e.id } })
            } else {
                this.selectShow = true
                this.selectShowUrl = e.images_content
                let time = e.wait_time * 1000
                this.time = setTimeout(() => {
                    this.getFlyer(e.id)
                }, time);
            }
        },
        getFlyer(id) {
            let params = {
                login_user: localStorage.getItem('token'),
                flyer_id: id
            };
            this.$post("/index/add_flyer_order", params)
                .then(res => {
                    if (res.code === 20000) {
                        this.$dialog.toast({
                            mes: '领取成功',
                            timeout: 2000,
                            icon: 'success',
                            callback: () => {
                                this.selectShow = false
                            }
                        });
                    } else {
                        this.$dialog.toast({
                            mes: res.msg,
                            timeout: 2000,
                            callback: () => {
                                this.selectShow = false
                            }
                        });
                    }
                })
                .catch(err => { });
        },
        close() {
            clearInterval(this.time);
            this.selectShow = false
        },
        clickTab(type) {
            if (this.tabSelect == type) {
                return;
            }
            this.tabSelect = type;
            this.page = 1;
            this.getCrollerData(true);
        },
        getSwiperData() {
            let params = {
                is_home: '1'
            };
            this.$post("/index/get_banner", params)
                .then(res => {
                    if (res.code === 20000) {
                        this.swiperSource = res.data
                    }
                })
                .catch(err => { });
        },
        contClass(index) {
            let color = ''
            if ((index + 3) % 3 === 0) {
                color = ''
            } else if ((index + 3) % 3 === 1) {
                color = 'cont1'
            } else {
                color = 'cont2'
            }
            return color
        },
        infinite() {
            setTimeout(() => {
                this.getCrollerData();
            },
                500);
        },
        refresh() {
            this.page = 1;
            this.getCrollerData(true);
        },
        getCrollerData(type) {
            let params = {
                login_user: localStorage.getItem('token'),
                page: this.page,
                limit: this.limit
            };
            let url = ''
            if (this.tabSelect) {
                url = '/index/get_weixinhao_list'
            } else {
                url = '/index/get_flyer_list'
            }
            this.$post(url, params)
                .then(res => {
                    if (res.code === 20000) {
                        this.page++;
                        if (type) {
                            this.listSource = res.data.list;
                            setTimeout(() => {
                                this.$refs.infinite.finishPullToRefresh();
                            },
                                500);
                        } else {
                            for (let i in res.data.list) {
                                let newData = res.data.list[i];
                                this.listSource.push(newData);
                            }
                            if (res.data.list.length < this.limit) {
                                this.noData = false;
                                this.$refs.infinite.finishInfinite(true);
                            } else {
                                this.$refs.infinite.finishInfinite();
                            }
                        }
                    }
                })
                .catch(err => { });
        },
        /**
         * 获取分享配置 title icon deca
         */
        getCouponConfig() {
            this.$post("/index/wx_share", {})
                .then(res => {
                    if (res.code == 20000) {
                        res.data.url = 'http://wangzhuan.3todo.cn/?type=wx';
                        this.couponConfigSource = res.data
                        this.getShareConfig()
                    }
                })
        },
        /**
         * 获取微信分享配置
         */
        getShareConfig() {
            let params = {
                // url: location.href.split('#')[0],
                url: 'http://wangzhuan.3todo.cn/',
            };
            this.$post("/index/share", params)
                .then(res => {
                    if (res.code === 20000) {
                        goodsShare(res.data, this.couponConfigSource, this.couponShareSuccess)
                    }
                })

        },
    },
    beforeCreate() {
        document.querySelector("body").setAttribute("style", "background-color:#e1deff");
    },
    created() {
        this.getSwiperData();
        this.getCouponConfig();
    },
    components: {
        'Footer': Footer,
    },
};
</script>
<style lang="less" scoped>
@import url("../../asset/css/home");
</style>